@import url(./blueberry.scss);
:root {
  /* Base Colors */
  /* https://github.com/chromium/chromium/blob/main/ui/chromeos/styles/cros_palette.json5 */
  --c-google-blue-50-alpha: #4285f419;
  --c-google-blue-50: #e8f0fe;
  --c-google-blue-400: #669df6;
  --c-google-blue-500: #4285f4;
  --c-google-blue-600: #1a73e8;
  --c-google-blue-700: #1967d2;
  --c-google-blue-800: #185abc;

  /* Theme Colors */
  --vp-c-brand: var(--c-mdui-indigo-600);
  --vp-c-brand-light: var(--c-mdui-indigo-500);
  --vp-c-brand-lighter: var(--c-mdui-indigo-400);
  --vp-c-brand-dark: var(--c-mdui-indigo-700);
  --vp-c-brand-darker: var(--c-mdui-indigo-800);

  /* Badges */
  --vp-badge-tip-border: var(--vp-c-brand-dark);
  --vp-badge-tip-text: var(--vp-c-brand);
  --vp-badge-tip-bg: var(--c-google-mdui-indigo-alpha);

  /* Custom Blocks */
  --vp-custom-block-tip-border: var(--vp-c-brand);
  --vp-custom-block-tip-text: var(--vp-c-brand-dark);

  /* Search */
  --vp-local-search-highlight-bg: var(--vp-c-brand);
  --vp-local-search-highlight-text: var(--vp-c-white);
}

::selection {
  background-color: var(--vp-c-brand);
  color: white;
}

/* 让图片置于顶层显示 */
.medium-zoom-overlay {
  z-index: 1000;
}

.medium-zoom-image--opened {
  z-index: 1000;
  background-color: var(--vp-c-bg);
  image-rendering: -webkit-optimize-contrast;
}

/* 背景模糊 */
:root {
  --vp-nav-bg-color: var(--vp-c-bg);
  --vp-c-bg: #ffffffcc;
  --vp-c-bg-elv: var(--vp-nav-bg-color);
  --vp-c-bg-elv-up: #ffffffcc;
  --vp-c-bg-elv-down: #f6f6f7cc;
  --vp-c-bg-elv-mute: #f6f6f7cc;
  --vp-c-bg-alt: #f6f6f7cc;
  --vp-backdrop-bg-color: rgba(0, 0, 0, 0.1);
  --vp-c-mute: #f6f6f7cc;
  --vp-c-mute-light: #f9f9fccc;
  --vp-c-mute-lighter: #ffffffcc;
  --vp-c-mute-dark: #e3e3e5cc;
  --vp-c-mute-darker: #d7d7d9cc;
}

.dark {
  --vp-c-bg: #1e1e2099;
  --vp-c-bg-elv: #25252966;
  --vp-c-bg-elv-up: #31313666;
  --vp-c-bg-elv-down: #1e1e2066;
  --vp-c-bg-elv-mute: #31313666;
  --vp-c-bg-alt: #16161866;
  --vp-c-mute: #31313699;
  --vp-c-mute-light: #3a3a3c99;
  --vp-c-mute-lighter: #50505399;
  --vp-c-mute-dark: #2c2c3099;
  --vp-c-mute-darker: #25252999;
}

.VPLocalNav::before,
.VPNavBar.fill .content-body::before,
.VPLocalNav .items,
.VPNavBarExtra .menu,
.VPFlyout .menu,
.shell,
.medium-zoom-image--opened,
.VPSidebar.open,
.VPNavScreen {
  backdrop-filter: blur(16px);
}

.VPFlyout .menu {
  border-radius: 12px;
}

/* 搜索框添加阴影 */
.shell,
.medium-zoom-image--opened[style*="transform"] {
  box-shadow: var(--vp-shadow-4);
}

.medium-zoom-image--opened[style*="transform"] {
  animation-duration: 0.3s;
  animation-name: dialog-open;
}

/* 选择器强度不够，标签名来凑 */
img.medium-zoom-image {
  transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.2, 0, 0.2, 1) !important;
}

/* VPLocalNav与VPNavBar不能直接添加模糊，否则会使子元素失效 */
.VPLocalNav::before,
.VPNavBar.fill .content-body::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* 将白色阴影改为下划线 */
.VPNavBar.has-sidebar .curtain {
  border-bottom: 1px solid transparent;
  height: 1px !important;
  bottom: 0px !important;
}

.VPNavBar.fill.has-sidebar .curtain {
  border-bottom-color: var(--vp-c-gutter);
}

.VPNavBar.has-sidebar .curtain::before {
  content: unset !important;
}

/* 去除最外部的背景色，因为内部已经有一个半透明背景色了 */
.VPNavBar {
  background: none !important;
}

/* 去除顶部空白 */
.VPLocalNav.reached-top {
  border-top: none;
}

/* 设置以下背景色，因为可能有动画干扰，效果不好 */
@media (min-width: 960px) {
  .VPNavBar.has-sidebar .content-body,
  .VPNavBar .content-body {
    background-color: var(--vp-nav-bg-color);
  }
}

@keyframes dialog-open {
  from {
    box-shadow: none;
  }

  to {
    box-shadow: var(--vp-shadow-4);
  }
}
